<template>
  <div class="sopcover-preview__wrap">
    <preview-page>
      <p style="margin-top: 40px;">
        <span>发文单位：<label class="underline">{{ model.sendCom }}</label></span>
        <span style="margin-left: 50px;">使用单位：<label class="underline">{{ model.useCom }}</label></span>
      </p>
      <h2 class="page-title">
        {{ model.productSpec }}
        <br />标准作业指导书
      </h2>
      <div class="page-info">
        <p>
          <label class="page-info__label" style="word-spacing: 3.7em;">编 制：</label>
          <span class="page-info__content underline">{{ model.preparedBy }}</span>
        </p>
        <p>
          <label class="page-info__label" style="word-spacing: 3.7em;">审 批：</label>
          <span class="page-info__content underline">{{ model.approvedBy }}</span>
        </p>
        <p>
          <label class="page-info__label">设计文件编号：</label>
          <span class="page-info__content underline">{{ model.designFileCode }}</span>
        </p>
        <p>
          <label class="page-info__label" style="word-spacing: 0.36em;">文 件 编 号：</label>
          <span class="page-info__content underline">{{ model.routeCode }}</span>
        </p>
        <p>
          <label class="page-info__label" style="word-spacing: 0.36em;">文 件 版 本：</label>
          <span class="page-info__content underline">{{ model.version }}</span>
        </p>
      </div>
    </preview-page>
    <preview-page>
      <p class="page-table-title">适用机型表</p>
      <table class="page-table">
        <colgroup>
          <col width="50" />
          <col width="135" />
          <col width="210" />
          <col width="50" />
          <col width="135" />
          <col width="210" />
        </colgroup>
        <thead>
          <tr>
            <th>序号</th>
            <th>产品品名</th>
            <th>产品规格型号</th>
            <th>序号</th>
            <th>产品品名</th>
            <th>产品规格型号</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in tableData" :key="index">
            <td>{{ item[0].index }}</td>
            <td>{{ item[0].productCode }}</td>
            <td>{{ item[0].productSpec }}</td>
            <td>{{ item[1].index }}</td>
            <td>{{ item[1].productCode }}</td>
            <td>{{ item[1].productSpec }}</td>
          </tr>
        </tbody>
      </table>
    </preview-page>
  </div>
</template>

<script>
import PreviewPage from './preview-page'
import { getAction } from '@/api/manage'

export default {
  components: {
    PreviewPage
  },
  props: {
    options: {}
  },
  data() {
    return {
      tableData: [],
      model: {}
    }
  },
  watch: {
    options(val) {
      this.initOptions
    }
  },
  created() {
    this.initOptions(this.options)
  },
  methods: {
    initOptions(options) {
      if (options) {
        const { routeCode, version } = options
        if (routeCode && version) {
          const params = {
            routeCode,
            version
          }
          getAction('/mes-craft/craft/mesPeProcessRoute/getSopInfoUp', params).then(res => {
            if (res && res.data) {
              this.model = res.data
            } else {
              this.model = Object.assign({}, options)
            }
            this.initTableData()
          })
          return
        } else {
          this.model = Object.assign({}, options)
        }
      } else {
        this.model = {}
      }
      this.initTableData()
    },
    initTableData() {
      const len = 18
      const arr = []
      let i
      for (i = 0; i < len; i++) {
        const items = [
          {
            index: i + 1
          },
          {
            index: i + 1 + len
          }
        ]
        arr.push(items)
      }
      if (this.model.productCode || this.model.productSpec) {
        arr[0][0].productCode = this.model.productCode
        arr[0][0].productSpec = this.model.productSpec
      }
      this.tableData = arr
    }
  }
}
</script>

<style lang="less">
.sopcover-preview {
  &__wrap {
    background-color: #dadce0;
  }

  &-page {
    .page {
      &-title {
        padding-top: 100px;
        padding-bottom: 80px;
        font-size: 30px;
        font-weight: normal;
        text-align: center;
        line-height: 1.7;
      }

      &-info {
        padding-left: 226px;
        font-size: 16px;

        p + p {
          margin-top: 10px;
        }

        &__label {
          display: inline-block;
          width: 112px;
          text-align: right;
        }

        &__content {
          display: inline-block;
          min-width: 230px;
          text-align: center;
        }
      }

      &-table {
        width: 100%;

        &-title {
          padding-top: 45px;
          padding-bottom: 15px;
          font-size: 30px;
          text-align: center;
        }

        td,
        th {
          padding: 2px 4px;
          font-weight: normal;
          text-align: center;
          border: 1px solid #999;
        }
      }
    }

    .underline {
      padding: 0 5px;
      text-align: center;
      border-bottom: 1px solid #999;
    }
  }
}
</style>